<template>
  <div class="home">
<!--      首页
&lt;!&ndash; 这里 router-view  用来展示home路由子路由对应子组件的&ndash;&gt;
    <router-view></router-view>-->
    <el-container>
      <el-header class="header">
        <h1>CRM客服管理系统</h1>
        <div class="middle">
          <router-link to="/org">组织结构</router-link>
          <router-link to="/crm">客户管理</router-link>
        </div>
        <div class="right">
          欢迎您：{{ username }}
          <span @click="toLeave">安全退出</span>
        </div>
      </el-header>

<!--      <el-container class="container">
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>-->
      <router-view></router-view>
      <el-footer class="footer">Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import {toLeave} from "../api/api";
import {SETUSERINFO} from "../store/types";

export default {
  name: 'Home',
  data() {
    return {
    }
  },
  methods: {
    toLeave() {
      // 调用接口
      toLeave().then(() => {
        // 退出成功要进行的操作
        // 1.清空localstroage
        // 2.清空vuex的相应信息
        // 3.跳转到登录页
        localStorage.removeItem('crmUsername')
        this.$store.commit(SETUSERINFO,{})
        this.$router.push('/login')
      })
    },
  },
  computed: {
    username() {
      return this.$store.state.userInfo.userName
    }
  },
  components: {

  }
}
</script>

<style lang="less">
  .header {
    display: flex;
    h1{
      width: 200px;
    }
    .right {
      width: 200px;
      span {
        font-size: 16px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .middle {
      flex: 1;
      text-align: left;
      padding-left: 50px;
      a {
        text-decoration: none;
        margin: auto 10px;
        color: rgba(238, 231, 231, 0.9);
      }
      a.router-link-active {
        font-size: 16px;
        font-weight: bold;
        color: rgba(238, 231, 231);
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .container {
    position: absolute;
    top: 60px;
    bottom: 60px;
    width: 100%;
  }
  .el-header, .el-footer {
    background-color: rgb(50,50,50);
    color: rgb(238, 231, 231);
    text-align: center;
    line-height: 60px;
    height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

</style>
